@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
   :root {
      --background: 0 0% 100%;
      --foreground: 240 10% 3.9%;
      --card: 0 0% 100%;
      --card-foreground: 240 10% 3.9%;
      --popover: 0 0% 100%;
      --popover-foreground: 240 10% 3.9%;
      --primary: 240 5.9% 10%;
      --primary-foreground: 0 0% 98%;
      --secondary: 240 4.8% 95.9%;
      --secondary-foreground: 240 5.9% 10%;
      --muted: 240 4.8% 95.9%;
      --muted-foreground: 240 3.8% 46.1%;
      --accent: 240 4.8% 95.9%;
      --accent-foreground: 240 5.9% 10%;
      --destructive: 0 72.22% 50.59%;
      --destructive-foreground: 0 0% 98%;
      --border: 240 5.9% 90%;
      --input: 240 5.9% 90%;
      --ring: 240 5% 64.9%;
      --radius: 0.5rem;
      --chart-1: 12 76% 61%;
      --chart-2: 173 58% 39%;
      --chart-3: 197 37% 24%;
      --chart-4: 43 74% 66%;
      --chart-5: 27 87% 67%;
      --sidebar-background: 0 0% 98%;
      --sidebar-foreground: 240 5.3% 26.1%;
      --sidebar-primary: 240 5.9% 10%;
      --sidebar-primary-foreground: 0 0% 98%;
      --sidebar-accent: 240 4.8% 95.9%;
      --sidebar-accent-foreground: 240 5.9% 10%;
      --sidebar-border: 220 13% 91%;
      --sidebar-ring: 240 5% 64.9%;

      --color-1: 0 100% 63%;
      --color-2: 270 100% 63%;
      --color-3: 210 100% 63%;
      --color-4: 195 100% 63%;
      --color-5:

      /* Grid Layout spezifische Variablen */ --grid-line-color:
         var(--border);
      --grid-line-opacity: 0.5;

      /* Globe Grid */
      --guide-color: rgba(255, 255, 255, 0.1);
      --ds-background-200: rgba(0, 0, 0, 0.5);
      --line-color-1: hsl(267, 100%, 64%);
      --line-color-2: hsl(155, 89%, 51%);
      --line-color-3: hsl(39, 89%, 65%);

      /* Nyx TOC */
      --nyx-banner-height: 0px;
      --nyx-nav-height: 0px;
   }

   .dark {
      --background: 240 10% 3.9%;
      --foreground: 0 0% 98%;
      --card: 240 10% 3.9%;
      --card-foreground: 0 0% 98%;
      --popover: 240 10% 3.9%;
      --popover-foreground: 0 0% 98%;
      --primary: 0 0% 98%;
      --primary-foreground: 240 5.9% 10%;
      --secondary: 240 3.7% 15.9%;
      --secondary-foreground: 0 0% 98%;
      --muted: 240 3.7% 15.9%;
      --muted-foreground: 240 5% 64.9%;
      --accent: 240 3.7% 15.9%;
      --accent-foreground: 0 0% 98%;
      --destructive: 0 62.8% 30.6%;
      --destructive-foreground: 0 85.7% 97.3%;
      --border: 240 3.7% 15.9%;
      --input: 240 3.7% 15.9%;
      --ring: 240 4.9% 83.9%;
      --chart-1: 220 70% 50%;
      --chart-2: 160 60% 45%;
      --chart-3: 30 80% 55%;
      --chart-4: 280 65% 60%;
      --chart-5: 340 75% 55%;
      --sidebar-background: 240 5.9% 10%;
      --sidebar-foreground: 240 4.8% 95.9%;
      --sidebar-primary: 224.3 76.3% 48%;
      --sidebar-primary-foreground: 0 0% 100%;
      --sidebar-accent: 240 3.7% 15.9%;
      --sidebar-accent-foreground: 240 4.8% 95.9%;
      --sidebar-border: 240 3.7% 15.9%;
      --sidebar-ring: 240 4.9% 83.9%;

      --color-1: 0 100% 63%;
      --color-2: 270 100% 63%;
      --color-3: 210 100% 63%;
      --color-4: 195 100% 63%;
      --color-5: 90 100% 63%;

      /* Globe Grid */
      --guide-color: rgba(255, 255, 255, 0.1);
      --ds-background-200: rgba(0, 0, 0, 0.5);
      --line-color-1: hsl(267, 100%, 64%);
      --line-color-2: hsl(272.1, 71.7%, 47.1%);
      --line-color-3: hsl(155, 89%, 51%);
   }
}

@layer base {
   * {
      @apply border-border;
      scrollbar-width: thin;
      scrollbar-color: hsl(var(--border)) transparent;
   }

   html {
      @apply scroll-smooth;
   }

   body {
      @apply bg-background text-foreground overscroll-none;
      font-feature-settings:
         'rlig' 1,
         'calt' 1;
      font-synthesis-weight: none;
      text-rendering: optimizeLegibility;
   }

   /* Custom scrollbar styling */
   ::-webkit-scrollbar {
      width: 5px;
   }
   ::-webkit-scrollbar-track {
      background: transparent;
   }
   ::-webkit-scrollbar-thumb {
      background: hsl(var(--border));
      border-radius: 5px;
   }

   @supports (font: -apple-system-body) and (-webkit-appearance: none) {
      [data-wrapper] {
         @apply min-[1800px]:border-t;
      }
   }
}

@layer utilities {
   .step {
      counter-increment: step;
   }

   .step:before {
      @apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium;
      @apply ml-[-50px] mt-[-4px];
      content: counter(step);
   }
}

@media (max-width: 640px) {
   .container {
      @apply px-4;
   }
}

.lab-bg {
   --mask-offset: 100px;
   -webkit-mask: linear-gradient(
         to bottom,
         transparent,
         #fff var(--mask-offset) calc(100% - var(--mask-offset)),
         transparent
      ),
      linear-gradient(
         to right,
         transparent,
         #fff var(--mask-offset) calc(100% - var(--mask-offset)),
         transparent
      );
   mask: linear-gradient(
         to bottom,
         transparent,
         #fff var(--mask-offset) calc(100% - var(--mask-offset)),
         transparent
      ),
      linear-gradient(
         to right,
         transparent,
         #fff var(--mask-offset) calc(100% - var(--mask-offset)),
         transparent
      );
   /* -webkit-mask: radial-gradient(circle at 50% 50%,transparent 0,#fff calc(100% - var(--mask-offset)),transparent 100%); */
   -webkit-mask-composite: source-in, xor;
   mask-composite: intersect;
}
